<template>
	<view class="content">
		<u-navbar :is-back="false">
			<u-tabs
				:active-color="lightColor"
				class="slot-wrap"
				:list="navList"
				count="count"
				:is-scroll="true"
				:current="tabCurrentIndex"
				@change="tabClick"
			></u-tabs>
		</u-navbar>
		<view class="swiper-box">
			<!-- 显示商品栏 -->
			<view v-if="tabCurrentIndex == 0" class="tab-content">
				<scroll-view class="list-scroll-content" scroll-y>
					<!-- 空白页 -->
					<u-empty style="margin-top: 40rpx" text="暂无收藏商品数据" mode="favor" v-if="goodsEmpty"></u-empty>
					<!-- 商品展示数据 -->
					<u-swipe-action
						style="width: 100%"
						@open="openLeftChange(item, index, 'goods')"
						:show="item.selected"
						btn-width="180"
						:options="LeftOptions"
						v-else
						v-for="(item, index) in goodList"
						@scrolltolower="onReachBottom()"
						@click="clickGoodsSwiperAction(item, index)"
						:index="index"
						:key="index"
					>
						<view class="goods" @click="goGoodsDetail(item)">
							<u-image width="131rpx" height="131rpx" :src="item.image" mode="aspectFit">
								<u-loading slot="loading"></u-loading>
							</u-image>
							<view class="goods-intro">
								<view>{{ item.goodsName }}</view>
								<view class="goods-sn">{{ item.goods_sn }}</view>
								<view>￥{{ item.price | unitPrice }}</view>
							</view>
						</view>
					</u-swipe-action>
				</scroll-view>
			</view>
			<!-- 显示收藏的店铺栏 -->
			<view v-else class="tab-content">
				<scroll-view class="list-scroll-content" scroll-y>
					<!-- 空白页 -->
					<u-empty style="margin-top: 40rpx" text="暂无收藏店铺数据" mode="favor" v-if="storeEmpty"></u-empty>
					<!-- 店铺展示数据 -->
					<u-swipe-action
						@open="openLeftChange(item, 'store')"
						:show="item.selected"
						btn-width="180"
						:options="LeftOptions"
						v-else
						v-for="(item, index) in storeList"
						:key="index"
						@scrolltolower="onReachBottom()"
						@click="clickStoreSwiperAction(item)"
					>
						<view class="store" @click="goStoreMainPage(item.id)">
							<view class="intro">
								<view class="store-logo">
									<u-image
										width="102rpx"
										height="102rpx"
										:src="item.storeLogo"
										:alt="item.storeName"
										mode="aspectFit"
									>
										<u-loading slot="loading"></u-loading>
									</u-image>
								</view>
								<view class="store-name">
									<view>{{ item.storeName }}</view>
									<u-tag
										size="mini"
										type="error"
										:color="$mainColor"
										v-if="item.selfOperated"
										text="自营"
										mode="plain"
										shape="circle"
									/>
								</view>
								<view class="store-collect">
									<view>进店逛逛</view>
								</view>
							</view>
						</view>
					</u-swipe-action>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import { getGoodsCollection, getStoreCollection, deleteGoodsCollection, deleteStoreCollection } from "@/api/members.js";
export default {
	data() {
		return {
			lightColor: this.$lightColor,
			// 商品左滑侧边栏
			LeftOptions: [
				{
					text: "取消",
					style: {
						backgroundColor: this.$lightColor
					}
				}
			],
			tabCurrentIndex: 0, //tab的下标默认为0，也就是说会默认请求商品
			navList: [
				//tab显示数据
				{
					name: "商品(0)",

					params: {
						pageNumber: 1,
						pageSize: 10
					}
				},
				{
					name: "店铺(0)",

					params: {
						pageNumber: 1,
						pageSize: 10
					}
				}
			],

			goodsEmpty: false, //商品数据是否为空
			storeEmpty: false, //店铺数据是否为空
			goodList: [], //商品集合
			storeList: [], //店铺集合
			goodsLoad: "", //后续分页是否还有数据商品
			goodsLoad2: "" //后续分页是否还有数据店铺
		};
	},
	onShow() {
		this.fetchReloadOrNextPage("reload");
	},
	onReachBottom() {
		this.fetchReloadOrNextPage("next");
	},

	methods: {
		// 刷新或者下一页
		fetchReloadOrNextPage(type) {
			if (type == "next") {
				this.navList[this.tabCurrentIndex].params.pageNumber++;
				if (this.tabCurrentIndex == 0) {
					this.getGoodList();
				} else {
					this.getStoreList();
				}
			} else {
				this.navList[0].params.pageNumber = 1;
				this.navList[1].params.pageNumber = 1;
				this.goodList = [];
				this.storeList = [];
				this.getGoodList();
				this.getStoreList();
			}
		},

		/**
		 * 打开商品左侧取消收藏
		 */
		openLeftChange(val, type) {
			const { goodList, storeList } = this;
			let way;
			type == "goods" ? (way = goodList) : (way = storeList);
			way.forEach((item) => {
				this.$set(item, "selected", false);
			});
			this.$set(val, "selected", false);
			val.selected = true;
		},

		/**
		 * 点击商品左侧取消收藏
		 */
		clickGoodsSwiperAction(val) {
			deleteGoodsCollection(val.skuId).then((res) => {
				if (res.statusCode == 200) {
					this.storeList = [];
					this.goodList = [];
					this.refreshData();
				}
			});
		},
		/*取消收藏刷新*/
		refreshData() {
			if (this.tabCurrentIndex == 0) {
				this.navList[0].params.pageNumber = 1;
				this.goodList = [];
				this.getGoodList();
			} else {
				this.navList[1].params.pageNumber = 1;
				this.storeList = [];
				this.getStoreList();
			}
		},
		/**
		 * 点击店铺左侧取消收藏
		 */
		clickStoreSwiperAction(val) {
			deleteStoreCollection(val.id).then((res) => {
				if (res.statusCode == 200) {
					this.storeList = [];
					this.refreshData();
				}
			});
		},

		/**
		 * 顶部tab点击
		 */
		tabClick(index) {
			this.tabCurrentIndex = index;
			this.goodsLoad = "";
			this.goodsLoad2 = "";
		},

		/**
		 * 查看商品详情
		 */
		goGoodsDetail(val) {
			//商品详情
			uni.navigateTo({
				url: "/pages/product/goods?id=" + val.skuId + "&goodsId=" + val.goodsId
			});
		},

		/**
		 * 查看店铺详情
		 */
		goStoreMainPage(id) {
			//店铺主页
			uni.navigateTo({
				url: "/pages/product/shopPage?id=" + id
			});
		},

		/**
		 * 获取商品集合
		 */
		getGoodList() {
			if (this.goodsLoad == "noMore") {
				return;
			}
			uni.showLoading({
				title: "加载中"
			});
			getGoodsCollection(this.navList[0].params, "GOODS").then((res) => {
				if (this.$store.state.isShowToast) {
					uni.hideLoading();
				}
				uni.stopPullDownRefresh();
				if (res.data.success) {
					let data = res.data.result;
					data.selected = false;
					this.navList[0].name = `商品(${data.total})`;
					if (data.records.length < this.navList[0].params.pageSize) {
						this.goodsLoad = "noMore";
					}
					this.goodList.push(...data.records);
					if (data.total == 0) {
						this.goodsEmpty = true;
					}
				}
			});
		},

		/**
		 * 获取店铺集合
		 */
		getStoreList() {
			if (this.goodsLoad2 == "noMore") {
				return;
			}
			uni.showLoading({
				title: "加载中"
			});
			getStoreCollection(this.navList[1].params, "STORE").then((res) => {
				if (this.$store.state.isShowToast) {
					uni.hideLoading();
				}
				uni.stopPullDownRefresh();
				if (res.data.success) {
					let data = res.data.result;
					data.selected = false;
					if (data.records.length < this.navList[1].params.pageSize) {
						this.goodsLoad2 = "noMore";
					}
					this.navList[1].name = `店铺(${data.total})`;
					if (data.total == 0) {
						this.storeEmpty = true;
					} else if (data.total < 10) {
						this.storeList.push(...data.records);
					}
				}
			});
		}
	},

	/**
	 * 下拉刷新时
	 */
	onPullDownRefresh() {
		if (this.tabCurrentIndex == 0) {
			this.navList[0].params.pageNumber = 1;
			this.goodList = [];
			this.getGoodList();
		} else {
			this.navList[1].params.pageNumber = 1;
			this.storeList = [];
			this.getStoreList();
		}
	}
};
</script>

<style lang="scss" scoped>
page,
.content {
	background: $page-color-base;
	height: 100%;
}

.slot-wrap {
	flex: 1;
	display: flex;
	justify-content: center;
}

.content {
	width: 100%;
}

.swiper-box {
	overflow-y: auto;
	//height: calc(100% - 50px);
	padding-bottom: 50px;
}

.list-scroll-content {
	height: 100%;
	width: 100%;
}

/deep/ .u-swipe-content {
	overflow: hidden;
}

.goods {
	background-color: #fff;
	border-bottom: 1px solid $border-color-light;
	height: 190rpx;
	display: flex;
	align-items: center;
	padding: 30rpx 20rpx;
	margin-top: 20rpx;

	image {
		width: 131rpx;
		height: 131rpx;
		border-radius: 10rpx;
	}

	.goods-intro {
		flex: 1;
		font-size: $font-base;
		line-height: 48rpx;
		margin-left: 30rpx;

		view:nth-child(1) {
			line-height: 1.4em;
			font-size: 24rpx;
			max-height: 2.8em; //height是line-height的整数倍，防止文字显示不全
			overflow: hidden;
			color: #666;
		}

		view:nth-child(2) {
			color: #cccccc;
			font-size: 24rpx;
		}

		view:nth-child(3) {
			color: $light-color;
		}
	}

	button {
		color: $main-color;
		height: 50rpx;
		width: 120rpx;
		font-size: $font-sm;
		padding: 0;
		line-height: 50rpx;
		background-color: #ffffff;
		margin-top: 80rpx;

		&::after {
			border-color: $main-color;
		}
	}
}

.store {
	width: 100%;
	background-color: #fff;
	border: 1px solid $border-color-light;
	border-radius: 16rpx;
	margin: 20rpx 10rpx;

	.intro {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx 0 40rpx;
		height: 170rpx;

		.store-logo {
			width: 102rpx;
			height: 102rpx;
			border-radius: 50%;
			overflow: hidden;
			flex: none;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.store-name {
			flex: 1;
			margin-left: 30rpx;
			line-height: 2em;

			:first-child {
				font-size: $font-base;
			}

			:last-child {
				font-size: $font-sm;
				color: #999;
			}
		}

		.store-collect {
			border-left: 1px solid $border-color-light;
			padding-left: 20rpx;
			text-align: center;

			:last-child {
				color: #999;
				font-size: $font-sm;
			}
		}
	}
}

.navbar {
	display: flex;
	height: 40px;
	padding: 0 5px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 10;

	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 26rpx;

		text {
			position: relative;
		}

		text.current {
			color: $light-color;
			font-weight: bold;
			font-size: 28rpx;

			&::after {
				content: "";
				position: absolute;
				left: 20rpx;
				bottom: -10rpx;
				width: 30rpx;
				height: 0;
				border-bottom: 2px solid $light-color;
			}
		}
	}
}
</style>
